@dotNum: 16;
@duration: 2s;
@w: 130px;
.circle {
  width: 100%;
  height: 100%;
  border-radius: @w;
  background: #000;
  animation-duration: @duration;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  &.active {
    .viewBox {
      animation-play-state: running;
    }
    .dot {
      .dotIn {
        animation-play-state: running;
      }
    }
  }
}
.viewBox {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: @w;
  height: @w;
  transform: rotate(-45deg);
  animation-play-state: paused;
  animation-name: y_ani;
  animation-duration: @duration * 8;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.5, -0, 0.5, 1.2);
}

.dot {
  width: 25%;
  height: 25%;
  padding: @w / 16;
  .dotIn {
    .circle;
    transform: scale(1.1);
    background: #809467;
    animation-name: g_ani;
    animation-play-state: paused;
  }
}
each(range(@dotNum), {
  .dot:nth-child(@{value}) {
    .dotIn {
      animation-delay: @value * @duration / 30 - @duration;
    }
  }
});

@keyframes g_ani {
  0% {
    transform: translate(0px, 0px) scale(0.9);
    background: #809467;
  }
  50% {
    transform: translate(0px, 0px) scale(1.5);
    background: #9b967c;
  }
  100% {
    transform: translate(0px, 0px) scale(0.9);
    background: #809467;
  }
}
@keyframes y_ani {
  0% {
    transform: rotate(-45deg);
  }
  20% {
    transform: rotate(-45deg);
  }
  25% {
    transform: rotate(45deg);
  }

  45% {
    transform: rotate(45deg);
  }
  50% {
    transform: rotate(135deg);
  }

  70% {
    transform: rotate(135deg);
  }
  75% {
    transform: rotate(225deg);
  }

  95% {
    transform: rotate(225deg);
  }
  100% {
    transform: rotate(315deg);
  }
}
